<template>

  <div class="login-box" :style="{background: 'url(https://qianzhi-mall.oss-cn-guangzhou.aliyuncs.com/dev/09946caa4de14fc587e77d6e53bf043e.jpg) center center no-repeat'}"><!-- style="background-image: url(https://vue-particles.netlify.com/static/img/sky.871d198.jpg);" -->
		<!-- <vue-particles
		    color="#dedede"
		    :particleOpacity="0.7"
		    :particlesNumber="80"
		    shapeType="circle"
		    :particleSize="4"
		    linesColor="#dedede"
		    :linesWidth="1"
		    :lineLinked="true"
		    :lineOpacity="0.4"
		    :linesDistance="150"
		    :moveSpeed="3"
		    :hoverEffect="true"
		    hoverMode="grab"
		    :clickEffect="true"
		    clickMode="push"
		  >
		  </vue-particles> -->
    <el-form :model="loginForm" :rules="rules" ref="loginForm" class="login-form">
      <h1 class="title">Megad管理平台</h1>
      <el-form-item prop="userName">
        <div class="item">
          <span class="name">用户名</span>
          <el-input
            v-model="loginForm.userName"
            autocomplete="off"
            placeholder="请输入用户名">
          </el-input>
        </div>

      </el-form-item>
      <el-form-item prop="password">
        <div class="item">
          <span class="name">密码</span>
          <el-input :type="textType"
            v-model="loginForm.password"
            @keyup.native.enter="login('loginForm')"
            autocomplete="off"
            placeholder="请输入密码">
            <!-- <i slot="suffix" class="el-input__icon el-icon-view btn-eye" @click="changeType"></i> -->
          </el-input>
        </div>

      </el-form-item>
      <!-- <el-form-item prop="code">
        <div class="item">
          <span class="name">验证码</span>
          <el-input :type="textType"
            v-model="loginForm.code"
            @keyup.native.enter="login('loginForm')"
            autocomplete="off"
            placeholder="请输入验证码">
          </el-input>
         <MySidentify/>
        </div>
      </el-form-item> -->
      <!-- <p class="tips"> 提示：如果您忘记密码，请到仟店小程序或APP的个人中 心>基本信息 中设置登录密码。</p> -->
      <el-form-item v-show="showMsg" style="margin-bottom:0;">
        <span class="text-danger">提示：手机号或密码错误，请重试！</span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login('loginForm')" class="login-btn" :loading="loading">登 录</el-button>
       <!-- <p class="register" @click="register">注册</p> -->
      </el-form-item>
    </el-form>
    <p class="loginCopyright"> <a href="https://beian.miit.gov.cn" target="_blank">粤ICP备2024299708号-2 </a></p>
  </div>
</template>

<script>
import { login,getRouters } from '@/api/getData';
export default {
  data () {
    return {
      img: require('@/assets/loginBg.png'),
      loginForm: {
        userName: '',
        password: '',
        code:''
      },
      rules: {
        userName: [
          { required: true, message: '请填写账号', trigger: 'submit' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'submit' }
        ],
        code: [
          { required: true, message: '请填写验证码', trigger: 'submit' }
        ]
      },
      loading: false,
      showMsg: false,
      textType: 'password'
    }
  },
  mounted() {
    localStorage.removeItem('bossAppToken');
    localStorage.removeItem('bossAppUserName');
    localStorage.removeItem('bossMenuList');
    localStorage.removeItem('btnPermissions');
  },
  methods: {
    login (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
           let data = {
             username:this.loginForm.userName,
             password:this.loginForm.password
           }
          login(data).then((result) => {
            if (result.code == '200') {
                localStorage.setItem('bossAppToken',result.token);
                localStorage.setItem('bossAppUserName',this.loginForm.userName);
                this.getRoutersFn();
            }else{
               this.$message.error(result.msg);
            }
            this.loading = false;
          }).catch(err=>{
            this.loading = false;
            console.log(err);
          });
        } else {
          console.log('login failed')
          return false
        }
      })
    },
    getRoutersFn(){/*获取路由状态和用户详情*/
      getRouters().then((result) => {
        if (result.code == '200') {
            console.log(JSON.stringify(result.data))
            this.$store.commit('setMenuList',JSON.stringify(result.data));
           // this.$store.commit('setUserDetail',JSON.stringify(result.data));
            this.$message.success('登录成功');
            this.$router.replace({path: '/dashboard'});
        }else{
           this.$message.error(result.msg);
        }
         this.loading = false;
      }).catch(err=>{
         this.loading = false;
        console.log(err);
      });
    },
		register(formName){
			this.$router.push({ path: '/register' })
		},
    changeType () {
      this.textType = (this.textType === 'password' ? 'text' : 'password')
    }
  }
}
</script>

<style lang="scss" scoped>
   .loginCopyright{
      text-align: center;
      color:#f0f2f5;
      position: fixed;
      bottom: 0px;
      display: block;
      width: 100%;
      cursor: pointer;
    }
  .login-box /deep/ .el-form-item__error{
    margin-left: 95px;
  }
  .tips{
    margin:10px 0px;
  }
  .item {
    display:flex;
    border-bottom:1px solid #DCDFE6;
    .name{
      color:#333;
      font-size:16px;
      font-weight: 600;
      width:80px;
      text-align:center;
      display: flex;
      align-items:center;
      justify-content: center;
    }
    .el-input{
      flex:1
    }
  }
  .login-box /deep/ .el-input__inner{
    font-size: 14px!important;
    color: #222!important;
    border-radius: 4px;
    height: 45px;
    line-height: 45px;
    border:none;
  }
#particles{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #b61924;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}
.register{
  text-align: right;
  margin-top:5px;
  color:#505458;
  cursor: pointer;
}
.login-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-size: cover!important;
  .login-form {
    border-radius: 5px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 500px;
    padding: 35px 50px 15px 50px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 5px #cac6c6;
		position: absolute;
		left:50%;
		top:50%;
		margin-top:-250px;
		margin-left:-250px;
		z-index: 1000;
    .title {
      margin: 0px auto 40px auto;
      font-size: 40px;
      text-align: center;
      color: #FC5173;
    }
    .btn-eye {
      cursor: pointer;
    }
    .text-danger {
      color: #F56C6C;
    }
    .login-btn {
      margin: 25px 0 0 0;
      width: 100%;
    }
  }
}

</style>
